<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
    <template #top>
      <u-navbar
        back-text=""
        :is-back="true"
        title="设置"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <view class="flex flex-col gap-3 p-4">
      <view class="flex justify-between px-5 py-3 rounded-[8px] bg-white" @click="vk.navigateTo('/pages/my/secure')">
        <view class="text-[14px] text-[#161A24]">账户安全 </view>
        <view> <u-icon name="arrow-right" size="26" color="#606368"></u-icon> </view>
      </view>
      <!--  -->
      <view class="rounded-[8px] bg-white">
        <view class="flex justify-between px-5 py-3" @click="vk.navigateTo('/pages/my/feedback')">
          <view class="text-[14px] text-[#161A24]">意见反馈 </view>
          <view> <u-icon name="arrow-right" size="26" color="#606368"></u-icon> </view>
        </view>
        <view class="flex justify-between px-5 py-3">
          <view class="text-[14px] text-[#161A24]">分享APP </view>
          <view> <u-icon name="arrow-right" size="26" color="#606368"></u-icon> </view>
        </view>
      </view>
      <!--  -->
      <view class="rounded-[8px] bg-white">
        <view class="flex justify-between px-5 py-3" @click="currentVersion">
          <view class="text-[14px] text-[#161A24]">当前版本 </view>
          <view class="text-[13px] text-[#8E9299]"> {{ vk.getVuex('$app.initData.site.version') || '' }}</view>
        </view>
        <view class="flex justify-between px-5 py-3" @click="clearCache">
          <view class="text-[14px] text-[#161A24]">清除缓存 </view>
          <view> <u-icon name="arrow-right" size="26" color="#606368"></u-icon> </view>
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="px-4 py-3">
        <view class="flex justify-center">
          <view class="h-[44px] bg-[#FFFFFF] w-full rounded-full flex items-center justify-center" @click="logOut">
            <text class="text-[16px] text-[#C0C4CC]">退出登录</text>
          </view>
        </view>
      </view>
    </template>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false
      }
    },

    methods: {
      currentVersion() {
        vk.toast('你当前已是最新版本', 'none')
      },
      clearCache() {
        // 显示加载提示
        vk.showLoading('清理中...')

        // 清除本地存储数据
        uni.clearStorageSync()

        // 获取并清除临时文件
        uni.getSavedFileList({
          success: res => {
            if (res.fileList.length > 0) {
              res.fileList.forEach(file => {
                uni.removeSavedFile({
                  filePath: file.filePath,
                  complete: () => {}
                })
              })
            }
          },
          complete: () => {
            // 清除图片缓存
            const imgManager = uni.getImageInfo({
              src: '',
              complete: () => {
                // 清除完成后隐藏加载提示并显示成功提示
                setTimeout(() => {
                  uni.hideLoading()
                  vk.toast('缓存清理成功', 'none')
                }, 800)
              }
            })
          }
        })
      },
      logOut() {
        vk.confirm(
          '是否确定退出登录?',
          async e => {
            if (e.confirm) {
              let res = await api.logout()
              if (res.code === 1) {
                // 清空本地存储
                uni.clearStorageSync()
                // 清空vuex状态
                vk.setVuex('$user.userInfo', {})
                vk.setVuex('$user.token', '')
                // 跳转到登录页
                vk.navigateTo('/pages/login/preLogin')
                vk.toast('退出成功')
              }
            }
          },
          '提示'
        )
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
